<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
	<title>Processing.js test of multi touch event handling</title> 
	<script type="text/javascript" src="../../../processing.js"></script> 
	<style type="text/css"> 
	html, body
	{
		background: #EEE;
		font-family: Arial;
		font-size: 13px;
		margin: 0;
		padding: 0;
	}
	h1
	{
		background: #385C85;
		color: #FFF;
		padding: 10px;
		padding-left: 20px;
		margin-top: 0px;
	}
	h1 a
	{
		color: #FFF;
	}
	h2
	{
		padding-left: 20px;
	}
	p
	{
		padding-left: 20px;
		line-height: 1.3em;
	}
	p a
	{
		color: #385C85;
	}
	canvas
	{
		margin: 10px 0;
	}
	pre
	{
		margin-left: 20px;
		margin-right: 20px;
		padding: 5px;
		background: #FFF;
		border-top: 1px solid #333;
		border-bottom: 1px solid #333;
	}
	div.ref-col
	{
		float: left;
		width: 32%;
	}
	</style> 
</head> 
<body> 
	<h1>Multi touch event handling</h1> 
	<p>Presents a grey 700x700 sketch that can only be drawn on with a touchscreen</p>
	<p>Each finger draws a different colour. Will not do anything with a mouse</p>
	<!-- copy paste your processing code below this script tag --> 
	<script id="script" type="application/processing"> 
void setup() {
  size(700, 700);
  background(200);
  noStroke(0);
}

// For touchscreens
void touchStart(t) {
  for (int i = 0; i < t.touches.length; i++) {
    if (i == 0) {
      fill(0);
    } else if (i == 1) {
      fill(245, 55, 55);
    } else if (i == 2) {
      fill(0, 124, 189);
    } else if (i == 3) {
      fill(99, 199, 64);
    } else if (i == 4) {
      fill(255)
    }
    ellipse(t.touches[i].offsetX, t.touches[i].offsetY, 10, 10);
  }
}

void touchMove(t) {
  for (int i = 0; i < t.touches.length; i++) {
    if (i == 0) {
      fill(0);
    } else if (i == 1) {
      fill(245, 55, 55);
    } else if (i == 2) {
      fill(0, 124, 189);
    } else if (i == 3) {
      fill(99, 199, 64);
    } else if (i == 4) {
      fill(255)
    }
    ellipse(t.touches[i].offsetX, t.touches[i].offsetY, 10, 10);
  }
}

	</script> 
	<canvas id="display"></canvas> 
	<br /> 
	<pre style="border-style: dotted; border-width: 1px; background-color: #FFFFFF; padding: 2px; margin: 5px" id="scriptDisplay">
	</pre> 
  <script>
    document.getElementById("scriptDisplay").innerHTML = document.getElementById("script").text;
  </script>
	<br /> 
</body> 
</html> 
 
